<template>
	<Content title="维修完成">
		<view class="container">
			<view class="content">
				<view class="title">故障判定记录</view>
				<u-form ref="uForm" labelPosition="left" :model="model" labelWidth="120" labelAlign="left"
					:rules="rules">
					<u-form-item label="故障部位" prop="faultPart">
						<!-- <uni-data-select v-model="model.faultPart" :localdata="faultPartList"
							placeholder="请选择"></uni-data-select> -->
							<u-input v-model="model.faultPart" placeholder="请输入"></u-input>
					</u-form-item>
					<u-form-item label="故障分类" prop="faultCategory" required>
						<uni-data-select v-model="model.faultCategory" :localdata="faultCategoryList"
							placeholder="请选择"></uni-data-select>
					</u-form-item>
					<u-form-item label="维修方式" prop="maintainMode" required>
						<uni-data-select v-model="model.maintainMode" :localdata="maintainModeList"
							placeholder="请选择"></uni-data-select>
					</u-form-item>
					<u-form-item label="需求完工时间" prop="needCompleteTime">
						<MyDate mode="date" v-model="model.needCompleteTime" placeholder="请选择"></MyDate>
					</u-form-item>
					<u-form-item label="故障原因分析" prop="faultReason" required>
						<!-- <uni-data-select v-model="model.faultReason" :localdata="faultReasonList"
							placeholder="请选择"></uni-data-select> -->
						<u-input v-model="model.faultReason" placeholder="请输入"></u-input>
					</u-form-item>

					<u-form-item label="解决办法和预防措施" prop="solution" required>
						<!-- <uni-data-select v-model="model.solution" :localdata="solutionList"
						placeholder="请选择"></uni-data-select> -->
						<u-input v-model="model.solution" placeholder="请输入"></u-input>
					</u-form-item>
					<u-form-item label="设备有无损坏" prop="ifBroken">
						<uni-data-select v-model="model.ifBroken" :localdata="ifBrokenList"
							placeholder="请选择"></uni-data-select>
					</u-form-item>
					<!-- <u-form-item label="故障类型" prop="faultTypeName" required>
                        <uni-data-select v-model="model.faultTypeName" :localdata="faultTypeNameList"
                            placeholder="请选择"></uni-data-select>
                    </u-form-item> -->
					<u-form-item label="备注" prop="remark">
						<u-input v-model="model.remark" :maxlength="100" placeholder="请填写"></u-input>
					</u-form-item>
					<u-form-item label="上传附件" prop="fileList">
						<MyUpload v-model="fileList" multiple :maxCount="5"></MyUpload>
					</u-form-item>
				</u-form>
			</view>
			<view class="content" v-if="model.maintainMode==2">
				<view class="title">委外记录</view>
				<u-form ref="uForm" labelPosition="left" :model="model" labelWidth="120" labelAlign="left"
					:rules="rules">
					<u-form-item label="采购单单号" prop="purchaseOrderNumber">
						<u-input v-model="model.purchaseOrderNumber" :maxlength="60" placeholder="请填写"></u-input>
					</u-form-item>
					<u-form-item label="供应商" prop="suppliers">
						<u-input v-model="model.suppliers" :maxlength="60" placeholder="请填写"></u-input>
					</u-form-item>
					<u-form-item label="到位日期" prop="arrivalDate">
						<MyDate mode="date" v-model="model.arrivalDate" placeholder="请选择"></MyDate>
					</u-form-item>
					<u-form-item label="金额" prop="outsourcedAmount">
						<MyNumber label v-model.number="model.outsourcedAmount" :min="1" :max="999999"
							placeholder="请填写">
						</MyNumber>
					</u-form-item>
					<u-form-item label="委外单据" prop="fileList2">
						<MyUpload v-model="fileList2" multiple :maxCount="5"></MyUpload>
					</u-form-item>
				</u-form>
			</view>
			<view class="content">
				<view class="title">协助维修人</view>
				<view class="simple-table-scroll" style="margin-top: 20rpx;">
					<view class="simple-table">
						<view class="simple-table-tr">
							<view class="simple-table-th simple-table-flex">姓名</view>
							<view class="simple-table-th simple-table-flex">工号</view>
							<view class="simple-table-th simple-table-flex">操作</view>
						</view>
						<view class="simple-table-tr" v-for="(item, index) in assisterList" :key="index">
							<view class="simple-table-td simple-table-flex">{{item.name}}</view>
							<view class="simple-table-td simple-table-flex">{{item.empno}}</view>
							<view class="simple-table-td simple-table-flex">
								<u-button class="delete-btn" type="error" hairline plain :throttleTime="1000"
									@click="delUser(index)">删除</u-button>
							</view>
						</view>
					</view>
				</view>
				<view class="add-btn" @click="addUser">+添加</view>
			</view>
			<view class="content">
				<view class="title">使用物料</view>
				<view class="simple-table-scroll" style="margin-top: 20rpx;">
					<view class="simple-table simple-table-mb" v-for="(item, index) in model.maintainWorkOrderMaterials"
						:key="index">
						<view class="simple-table-tr">
							<view class="simple-table-th simple-table-flex">备件料号</view>
							<view class="simple-table-td simple-table-flex">{{item.materialCode || '--' }}</view>
						</view>
						<view class="simple-table-tr">
							<view class="simple-table-th simple-table-flex">备件品名</view>
							<view class="simple-table-td simple-table-flex">{{item.materialName || '--' }}</view>
						</view>
						<view class="simple-table-tr">
							<view class="simple-table-th simple-table-flex">库存数量</view>
							<view class="simple-table-td simple-table-flex">{{item.inventoryQuantity || '--' }}</view>
						</view>
						<view class="simple-table-tr">
							<view class="simple-table-th simple-table-flex">备件规格</view>
							<view class="simple-table-td simple-table-flex">{{item.materialModel || '--' }}</view>
						</view>
						<view class="simple-table-tr">
							<view class="simple-table-th simple-table-flex">使用数量</view>
							<view class="simple-table-td simple-table-flex">{{item.usedQuantity || '--' }}</view>
						</view>
						<view class="simple-table-tr">
							<view class="simple-table-th simple-table-flex">处理方式及结果</view>
							<view class="simple-table-td simple-table-flex">{{item.handlingMethod || '--' }}</view>
						</view>
						<view class="simple-table-tr">
							<view class="simple-table-td simple-table-flex">
								<u-button class="delete-btn" type="primary" hairline plain :throttleTime="1000"
									@click="editMaterial(item)">编辑</u-button>
								<u-button class="delete-btn" type="error" hairline plain :throttleTime="1000"
									@click="delMaterial(model.maintainWorkOrderMaterials, item, index)">删除</u-button>
							</view>
						</view>
					</view>
				</view>
				<view class="add-btn" @click="addMaterial()">+添加</view>
			</view>
			<view class="btn-v">
				<view class="but-box">
					<u-button :throttleTime="300" class="btn" @click="close" text="取消"></u-button>
					<u-button :throttleTime="300" class="btn" type="primary" @click="save" text="完成"
						:loading="loading"></u-button>
				</view>
			</view>
		</view>
	</Content>
</template>

<script>
	import Content from "@/components/content/index.vue";
	import MyDate from "@/components/myDate.vue";
	import MyNumber from "@/components/MyNumber.vue";

	import MyUpload from "@/components/myUpload";
	import fetch from "@/utils/fetch";
	import {
		setPageData,
		getUserInfo
	} from "@/store/user";

	export default {
		components: {
			Content,
			MyDate,
			MyUpload,
			MyNumber,
		},
		data() {
			return {
				id: "",
				deviceMId: "",
				loading: false,
				userInfo: getUserInfo(),
				storageKey: 'deviceMaintenanceRepairCompleted',
				assisterList: [],
				fileList: [],
				fileList2: [],

				faultPartList: [], // 故障部位
				faultCategoryList: [], // 故障分类
				maintainModeList: [{
						value: 0,
						text: '自行维修'
					},
					{
						value: 1,
						text: '保修期内维修'
					},
					{
						value: 2,
						text: '委外维修'
					}
				], // 维修方式
				faultReasonList: [], // 故障原因分析
				solutionList: [], // 解决办法和预防措施
				ifBrokenList: [{
						text: '有',
						value: 2
					},
					{
						text: '无',
						value: 1
					}
				], // 设备有无损坏
				faultTypeNameList: [], // 故障类型

				model: {
					faultPart: "", // 故障部位
					faultCategory: "", //故障分类
					maintainMode: "", // 维修方式
					needCompleteTime: "", // 需求完工时间
					faultReason: "", // 故障原因分析
					solution: "", // 解决办法和预防措施
					ifBroken: "", // 设备有无损坏
					remark: "", // 备注
					maintainWorkOrderMaterials: []
				},
				rules: {
					faultCategory: {
						required: true,
						message: "请填写",
						trigger: "change"
					},
					maintainMode: {
						type: 'number',
						required: true,
						message: "请填写",
						trigger: "change"
					},
					faultReason: {
						required: true,
						message: "请填写",
						trigger: "blur",
					},
					solution: {
						required: true,
						message: "请填写",
						trigger: "blur"
					},
					// faultTypeName: {
					//     required: true,
					//     message: "请填写",
					//     trigger: "blur"
					// }
				},
			};
		},
		watch: {
			loading(val) {
				if (val)
					this.$loading.open();
				this.$loading.close();
			}
		},
		onShow() {
			// 读取协助人
			const selections = uni.getStorageSync(this.storageKey) || [];
			this.assisterList = Array.isArray(selections) ?
				selections.map((item) => {
					return {
						userId: item.id,
						...item,
					};
				}) : [];
			// 读取物料
			this.getMaintainWorkOrderMaterials();
		},
		onLoad(option) {
			this.id = option.id;
			this.deviceMId = option.deviceMId;
			this.getDetail();
		},
		methods: {
			getDetail(onlyMaintainWorkOrderMaterials) {
				const that = this;
				that.loading = true;
				fetch("get", "/dms/deviceMaintenanceWorkOrder/workOrderInfo", {
					workOrderId: that.id,
				}, null).then((res) => {
					const data = res.data;

					// 表单采集
					that.model.faultPart = data.faultPart; // 故障部位
					that.model.faultCategory = data.faultCategory; //故障分类
					that.model.maintainMode = data.maintainMode; // 维修方式
					that.model.needCompleteTime = data.needCompleteTime; // 需求完工时间
					that.model.faultReason = data.faultReason; // 故障原因分析
					that.model.solution = data.solution; // 解决办法和预防措施
					that.model.ifBroken = data.ifBroken; // 设备有无损坏
					that.model.remark = data.remark; // 备注
					that.model.assistRepairer = data.assistRepairer; // 维修协助人
					that.model.maintainWorkOrderMaterials = data.maintainWorkOrderMaterials; // 使用物料

					that.model.purchaseOrderNumber = data.purchaseOrderNumber; // 采购单单号
					that.model.suppliers = data.suppliers; // 供应商
					that.model.arrivalDate = data.arrivalDate; // 到位日期
					that.model.outsourcedAmount = data.outsourcedAmount; // 金额

					// 参考PC端参数
					that.model.workOrderNo = res.data.workOrderNo;
					that.model.ifNeedBuyBackups = data.ifNeedBuyBackups;

					// 读取
					that.getFaultPartList(res.data.deviceId);
					that.getFaultCategoryList();
					that.getFaultReasonList(res.data.deviceId);
					that.getSolutionList(res.data.deviceId);
					that.getFaultTypeNameList();

					that.loading = false;
				});
			},
			getMaintainWorkOrderMaterials() {
				const that = this;
				that.loading = true;
				fetch("get", "/dms/deviceMaintenanceWorkOrder/workOrderInfo", {
					workOrderId: this.id,
				}, null).then((res) => {
					const data = res.data;
					that.model.maintainWorkOrderMaterials = data.maintainWorkOrderMaterials; // 使用物料
					that.loading = false;
				});
			},
			getFaultPartList(deviceId) {
				fetch("get", "/dms/devMaintainKb/selectTroubleUnitByDeviceId", {
					deviceId
				}).then((res) => {
					this.faultPartList = (res.data || []).map(item => {
						return {
							text: item.troubleUnit,
							value: item.troubleUnit,
						};
					});
				});
			},
			getFaultCategoryList(deviceId) {
				fetch("get", "/dms/faultCategory/dictList?name=故障分类", {
					deviceId
				}).then((res) => {
					this.faultCategoryList = (res.data || []).map(item => {
						return {
							text: item.value,
							value: item.value,
						};
					});
				});
			},
			getFaultReasonList(deviceId) {
				fetch("get", "/dms/devMaintainKb/selectAnalysisOfCausesByDeviceId", {
					deviceId
				}).then((res) => {
					this.faultReasonList = (res.data || []).map(item => {
						return {
							text: item.faultReason,
							value: item.faultReason,
						};
					});
				});
			},
			getFaultReasonList(deviceId) {
				fetch("get", "/dms/devMaintainKb/selectAnalysisOfCausesByDeviceId", {
					deviceId
				}).then((res) => {
					this.faultReasonList = (res.data || []).map(item => {
						return {
							text: item.faultReason,
							value: item.faultReason,
						};
					});
				});
			},
			getSolutionList(deviceId) {
				fetch("get", "/dms/devMaintainKb/selectSolutionByDeviceId", {
					deviceId
				}).then((res) => {
					this.solutionList = (res.data || []).map(item => {
						return {
							text: item.solution,
							value: item.solution,
						};
					});
				});
			},
			getFaultTypeNameList() {
				fetch("get", "/dms/faultCategory/basicDict", {
					name: '故障类型'
				}).then((res) => {
					this.faultTypeNameList = (res.data || []).map(item => {
						return {
							text: item.value,
							value: item.value,
						};
					});
				});
			},
			addUser() {
				uni.navigateTo({
					url: "/pages/common/operator/index?storageKey=" + this.storageKey + '&multiple=true',
					animationType: "pop-in",
				});
			},
			delUser(index) {
				const selections = uni.getStorageSync(this.storageKey) || [];
				selections.splice(index, 1);
				uni.setStorageSync(this.storageKey, selections);
				this.assisterList = selections;
			},
			addMaterial() {
				this.toPath({}, "/pages/device/maintenance-hall/add-material?id=" + this.id + "&deviceMId=" +
					this.deviceMId);
			},
			editMaterial(item) {
				this.toPath(item, "/pages/device/maintenance-hall/add-material?id=" + this.id + "&deviceMId=" +
					this.deviceMId);
			},
			delMaterial(list, item, index) {
				const that = this;
				that.loading = true;
				fetch("delete", `/dms/deviceMaintenanceWorkOrder/deleteMaintainBackupTemporary?id=${item.id}`)
					.then((res) => {
						uni.$emit("openToast", {
							type: "success",
							title: "操作成功",
							complete() {
								list.splice(index, 1);
								that.loading = false;
							},
						});
					});
			},
			uploadFile() {
				this.$refs.myUploaderFiles.chooseVideoImage();
			},
			close() {
				uni.navigateBack({
					delta: 1, //返回上一页
				});
			},
			save() {
				const that = this;
				that.$refs.uForm.validate().then((valid) => {
					if (valid) {
						// 验证通过
						that.loading = true;
						let data = {
							dmsMaintainId: that.id,
							workOrderNo: that.workOrderNo,

							// 采集表单
							faultPart: that.model.faultPart,
							faultCategory: that.model.faultCategory,
							maintainMode: that.model.maintainMode,
							needCompleteTime: that.model.needCompleteTime,
							faultReason: that.model.faultReason,
							solution: that.model.solution,
							ifBroken: that.model.ifBroken,
							faultTypeName: that.model.faultTypeName,
							remark: that.model.remark,
							attachmentDTOs: that.fileList.map(item => {
								return {
									attachmentType: 3,
									fileName: item.name,
									filePath: item.url,
									fileUrl: item.url
								}
							}), // 附件
							purchaseOrderNumber: that.model.purchaseOrderNumber,
							suppliers: that.model.suppliers,
							arrivalDate: that.model.arrivalDate,
							outsourcedAmount: that.model.outsourcedAmount,
							attachmentDTOs2: that.fileList2.map(item => {
								return {
									attachmentType: 3,
									fileName: item.name,
									filePath: item.url,
									fileUrl: item.url
								}
							}), // 附件

							// 已知参数(来自Details查询)
							ifNeedBuyBackups: that.model.ifNeedBuyBackups,
						};
						if (that.assisterList && that.assisterList.length != 0) {
							data.assistRepairer = that.assisterList.map(item => {
								return item.empno + '-' + item.name
							}).join(',');
							data.userIds = that.assisterList.map(item => {
								return item.id;
							});
						}
						fetch("post", "/dms/deviceMaintenanceWorkOrder/completion", data).then(
							(res) => {
								that.loading = false;
								uni.$emit("openToast", {
									type: "success",
									title: "操作成功",
									complete() {
										// 删除协助用户缓存
										const selections = uni.getStorageSync(that.storageKey) || [];
										selections.splice(0, selections.length);
										uni.setStorageSync(that.storageKey, selections);
										// 返回上一页
										uni.navigateBack({
											delta: 1,
										});
									},
								});
							}
						).catch(() => {
							that.loading = false;
						});
					}
				});
			},
			// 公共方法
			toPath(data, path) {
				setPageData(data);
				uni.navigateTo({
					url: path,
					animationType: "pop-in",
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.container {
		height: 100%;
		overflow: auto;
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		padding-bottom: 150rpx;

		/deep/ .u-form-item__body__left__content__label {
			margin-left: 20rpx;
		}

		/deep/ .uni-select__input-placeholder {
			color: #cbc9cc !important;
			font-size: 15px !important;
		}
	}

	.content {
		padding: 30rpx 30rpx;
		background-color: #ffffff;
		border-radius: 5px;
		box-shadow: 0 12rpx 18rpx -6rpx rgba(0, 0, 0, 0.2);
		margin-bottom: 20rpx;

		.title {
			font-size: 30rpx;
			font-weight: bold;
			margin: 40rpx 0 20rpx;

			&:first-child {
				margin-top: 0;
			}
		}
	}

	.simple-table-scroll {
		overflow: auto hidden;

		.simple-table {
			width: 100%;
			font-size: 28rpx;

			&-mb {
				margin-bottom: 20rpx;
			}

			.simple-table-tr {
				display: flex;
				border-left: 1px solid #eee;

				&:last-child {
					border-bottom: 1px solid #eee;
				}

				.simple-table-th,
				.simple-table-td {
					justify-content: center;
					align-items: center;
					text-align: center;
					padding: 10rpx;
					min-width: 132rpx;
				}

				.simple-table-th {
					background-color: #f5f6f7;
					border-right: 1px solid #eee;
					border-top: 1px solid #eee;
					color: #666;
				}

				.simple-table-td {
					border-right: 1px solid #eee;
					border-top: 1px solid #eee;
					padding: 20rpx 10rpx;
				}
			}
		}

		.simple-table-flex {
			flex: 1;
			display: flex;
		}
	}

	.data-select {
		/deep/ .uni-select__selector {
			top: -155px;

			.uni-popper__arrow {
				display: none;
			}
		}
	}

	.box-item {
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;

		.label {
			width: 130rpx;
			margin-right: 20rpx;
			color: #777;
		}

		.box-input {
			margin: 0 20rpx;
		}
	}

	.link {
		width: 100%;
		text-align: center;
		color: #3c9cff;
		padding: 10px 0;
	}

	.add-btn {
		width: 100%;
		text-align: center;
		color: #3c9cff;
		margin: 20px 0 10px;
	}

	.delete-btn {
		height: auto;
		width: auto;
		padding: 0;
	}
</style>